<template>
  <div>
    <a-space direction="vertical">
      <a-input-search
        v-model:value="value"
        placeholder="KeepFalse"
        style="width: 200px"
        @search="onSearch"
      />
    </a-space>
    keepfalse <a-button
      type="default"
    >
      mock
    </a-button>
  </div>
</template>
<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue'
import { getUsername } from '../../https/api'
export default defineComponent({
  name: 'KeepFalse',
  setup () {
    const data = reactive({})
    const value = ref<string>('')
    const onSearch = (searchValue: string) => {
      console.log('use value', searchValue)
      console.log('or use this.value', value.value)
    }
    onBeforeMount(async () => {
      //  2.组件挂载页面之前执行----onBeforeMount
      const res = await getUsername('tsx ---- 999')
      console.log(res, '组件挂载完毕，执行异步 onBeforeMount 阶段')
      value.value = res as string
    })
    onMounted(() => {
      // 3.组件挂载到页面之后执行-------onMounted
    })

    // const result = await getUsername('异步请求')
    return {
      ...toRefs(data),
      onSearch,
      value
    }
  }
})
</script>

<style scoped lang='less'>
.activeClass{
  color:chartreuse
}
</style>
